<!--
 * @Author: your name
 * @Date: 2021-12-27 15:16:44
 * @LastEditTime: 2022-11-09 16:20:08
 * @LastEditors: Aaron Huang
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \ias_ui\src\views\coi\approve\components\operationLog.vue
-->
<template>
  <el-dialog title="操作日志" top="15vh" :visible="dialogVisible" width="1200px" :before-close="handleClose">
    <el-table :data="processDataList" class="table" stripe style="width: 100%" border>
      <el-table-column :show-overflow-tooltip="true" label="操作时间" width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.updateTime | transDate }}
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="操作人" width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.createdBy || scope.row.createUserId }}
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="操作内容" prop="mainRemark" align="center" />
      <el-table-column :show-overflow-tooltip="true" label="备注" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.subStatus === 3050 || scope.row.subStatus === 5020 || scope.row.subStatus === 6020 || scope.row.subStatus === 0" class="remark">
            <div v-if="IsJsonString(scope.row.subRemark) && Array.isArray(JSON.parse(scope.row.subRemark)) && JSON.parse(scope.row.subRemark).length">
              <div v-if="filterRemark(scope.row.subRemark).length">
                <div class="remarkTitle">驳回原因：</div>
                <div class="remarkList">
                  <div v-for="item in filterRemark(scope.row.subRemark)" :key="item.rejectReasonId">{{ item.rejectReason }}</div>
                </div>
                <br>
              </div>
              <div v-if="filterRemark(scope.row.subRemark, false).length">
                <div class="remarkTitle">备注：</div>
                <div class="remarkList">
                  <div v-for="item in filterRemark(scope.row.subRemark, false)" :key="item.rejectReasonId" v-html="item.rejectReason" />
                </div>
              </div>
            </div>
            <div v-else-if="!IsJsonString(scope.row.subRemark) && scope.row.subRemark">
              {{ scope.row.subRemark }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import moment from 'moment'
import { IsJsonString } from '@/utils/processingData'

export default {
  name: 'OperationLog',
  filters: {
    transDate(v) {
      return moment(v).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  props: {
    processDataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      IsJsonString
    }
  },
  methods: {
    // 弹窗关闭事件
    handleClose() {
      this.dialogVisible = false
    },
    filterRemark(str, flag = true) {
      const arr = JSON.parse(str)
      return flag ? arr.filter((item) => item.rejectReasonId !== 0) : arr.filter((item) => item.rejectReasonId === 0)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ p {
  margin: 0;
  padding: 0;
}
.remark {
  margin: 8px 0;
  text-align: left;
  .remarkTitle {
    width: 70px;
    line-height: 20px;
  }
  .remarkList {
    flex: 1;
    line-height: 20px;
    white-space: pre-wrap;
  }
}
</style>
